/**
 * Element Plus组件样式定制
 * 
 * 对Element Plus组件进行WMS主题定制
 * 确保组件样式与WMS设计系统一致
 */

/* ================================
 * Element Plus主题变量覆盖
 * ================================ */

:root {
  /* 主色彩覆盖 */
  --el-color-primary: var(--wms-primary-color);
  --el-color-success: var(--wms-success-color);
  --el-color-warning: var(--wms-warning-color);
  --el-color-danger: var(--wms-error-color);
  --el-color-info: var(--wms-info-color);
  
  /* 文本颜色覆盖 */
  --el-text-color-primary: var(--wms-text-color-primary);
  --el-text-color-regular: var(--wms-text-color-regular);
  --el-text-color-secondary: var(--wms-text-color-secondary);
  --el-text-color-placeholder: var(--wms-text-color-placeholder);
  --el-text-color-disabled: var(--wms-text-color-disabled);
  
  /* 背景颜色覆盖 */
  --el-bg-color: var(--wms-bg-white);
  --el-bg-color-page: var(--wms-bg-light);
  --el-bg-color-overlay: var(--wms-bg-overlay);
  
  /* 边框颜色覆盖 */
  --el-border-color: var(--wms-border-color);
  --el-border-color-light: var(--wms-border-color-light);
  --el-border-color-lighter: var(--wms-border-color-lighter);
  --el-border-color-dark: var(--wms-border-color-dark);
  --el-border-color-darker: var(--wms-border-color-darker);
  
  /* 字体系统覆盖 */
  --el-font-family: var(--wms-font-family);
  --el-font-size-base: var(--wms-font-size-sm);
  --el-font-size-small: var(--wms-font-size-xs);
  --el-font-size-large: var(--wms-font-size-md);
  
  /* 圆角覆盖 */
  --el-border-radius-base: var(--wms-border-radius-base);
  --el-border-radius-small: var(--wms-border-radius-sm);
  --el-border-radius-round: var(--wms-border-radius-round);
  
  /* 阴影覆盖 */
  --el-box-shadow: var(--wms-shadow-sm);
  --el-box-shadow-light: var(--wms-shadow-xs);
  --el-box-shadow-dark: var(--wms-shadow-md);
  
  /* 过渡时间覆盖 */
  --el-transition-duration: var(--wms-transition-duration-base);
  --el-transition-duration-fast: var(--wms-transition-duration-fast);
}

/* ================================
 * 按钮组件定制
 * ================================ */

.el-button {
  font-weight: var(--wms-font-weight-medium);
  border-radius: var(--wms-border-radius-base);
  transition: var(--wms-transition-base);
  
  /* 按钮尺寸定制 */
  &.el-button--small {
    padding: 0 var(--wms-padding-sm);
    height: var(--wms-form-control-height-sm);
    font-size: var(--wms-font-size-xs);
  }
  
  &.el-button--default {
    padding: 0 var(--wms-padding-md);
    height: var(--wms-form-control-height);
    font-size: var(--wms-font-size-sm);
  }
  
  &.el-button--large {
    padding: 0 var(--wms-padding-lg);
    height: var(--wms-form-control-height-lg);
    font-size: var(--wms-font-size-md);
  }
  
  /* 悬停效果增强 */
  &:hover {
    transform: translateY(-1px);
    box-shadow: var(--wms-shadow-sm);
  }
  
  &:active {
    transform: translateY(0);
  }
  
  /* 图标按钮优化 */
  &.is-circle {
    border-radius: var(--wms-border-radius-round);
  }
  
  /* 按钮组优化 */
  &-group {
    .el-button {
      &:hover {
        z-index: 1;
      }
    }
  }
}

/* ================================
 * 输入框组件定制
 * ================================ */

.el-input {
  /* 输入框样式定制 */
  .el-input__wrapper {
    border-radius: var(--wms-border-radius-base);
    transition: var(--wms-transition-base);
    
    &:hover {
      border-color: var(--wms-primary-color);
    }
    
    &.is-focus {
      border-color: var(--wms-primary-color);
      box-shadow: 0 0 0 2px var(--wms-primary-color-light);
    }
  }
  
  /* 输入框内部元素 */
  .el-input__inner {
    color: var(--wms-text-color-primary);
    
    &::placeholder {
      color: var(--wms-text-color-placeholder);
    }
  }
  
  /* 输入框前后缀 */
  .el-input__prefix,
  .el-input__suffix {
    color: var(--wms-text-color-secondary);
  }
  
  /* 输入框尺寸定制 */
  &.el-input--small {
    .el-input__wrapper {
      height: var(--wms-form-control-height-sm);
    }
  }
  
  &.el-input--large {
    .el-input__wrapper {
      height: var(--wms-form-control-height-lg);
    }
  }
}

/* ================================
 * 表格组件定制
 * ================================ */

.el-table {
  border-radius: var(--wms-border-radius-md);
  overflow: hidden;
  
  /* 表头定制 */
  .el-table__header-wrapper {
    .el-table__header {
      th {
        background-color: var(--wms-table-header-bg);
        color: var(--wms-table-header-color);
        font-weight: var(--wms-font-weight-medium);
        border-bottom: 2px solid var(--wms-table-border-color);
      }
    }
  }
  
  /* 表体定制 */
  .el-table__body-wrapper {
    .el-table__body {
      tr {
        transition: var(--wms-transition-fast);
        
        &:hover {
          background-color: var(--wms-table-row-hover-bg);
        }
      }
      
      td {
        border-bottom: 1px solid var(--wms-table-border-color);
      }
    }
  }
  
  /* 空状态定制 */
  .el-table__empty-block {
    .el-table__empty-text {
      color: var(--wms-text-color-placeholder);
    }
  }
  
  /* 固定列阴影 */
  .el-table__fixed,
  .el-table__fixed-right {
    box-shadow: var(--wms-shadow-md);
  }
}

/* ================================
 * 分页组件定制
 * ================================ */

.el-pagination {
  /* 分页按钮定制 */
  .btn-prev,
  .btn-next,
  .el-pager li {
    border-radius: var(--wms-border-radius-base);
    transition: var(--wms-transition-base);
    
    &:hover {
      color: var(--wms-primary-color);
      transform: translateY(-1px);
    }
    
    &.is-active {
      background-color: var(--wms-primary-color);
      color: var(--wms-text-color-white);
    }
  }
  
  /* 页面大小选择器定制 */
  .el-pagination__sizes {
    .el-select {
      .el-select__wrapper {
        border-radius: var(--wms-border-radius-base);
      }
    }
  }
  
  /* 跳转输入框定制 */
  .el-pagination__jump {
    .el-input {
      .el-input__wrapper {
        border-radius: var(--wms-border-radius-base);
      }
    }
  }
}

/* ================================
 * 表单组件定制
 * ================================ */

.el-form {
  /* 表单项定制 */
  .el-form-item {
    margin-bottom: var(--wms-form-item-margin-bottom);
    
    /* 表单标签定制 */
    .el-form-item__label {
      color: var(--wms-form-label-color);
      font-weight: var(--wms-font-weight-medium);
      margin-bottom: var(--wms-form-label-margin-bottom);
    }
    
    /* 错误信息定制 */
    .el-form-item__error {
      color: var(--wms-error-color);
      font-size: var(--wms-font-size-xs);
    }
    
    /* 必填标记定制 */
    &.is-required {
      .el-form-item__label::before {
        content: '*';
        color: var(--wms-error-color);
        margin-right: 4px;
      }
    }
  }
}

/* ================================
 * 卡片组件定制
 * ================================ */

.el-card {
  border-radius: var(--wms-card-border-radius);
  border-color: var(--wms-card-border-color);
  box-shadow: var(--wms-card-shadow);
  transition: var(--wms-transition-base);
  
  &:hover {
    box-shadow: var(--wms-card-shadow-hover);
  }
  
  /* 卡片头部定制 */
  .el-card__header {
    border-bottom-color: var(--wms-border-color-light);
    padding: var(--wms-padding-lg);
    font-weight: var(--wms-font-weight-medium);
    color: var(--wms-text-color-primary);
  }
  
  /* 卡片内容定制 */
  .el-card__body {
    padding: var(--wms-card-padding);
  }
}

/* ================================
 * 对话框组件定制
 * ================================ */

.el-dialog {
  border-radius: var(--wms-border-radius-lg);
  box-shadow: var(--wms-modal-shadow);
  
  /* 对话框头部定制 */
  .el-dialog__header {
    border-bottom: 1px solid var(--wms-border-color-light);
    padding: var(--wms-padding-lg);
    
    .el-dialog__title {
      font-weight: var(--wms-font-weight-medium);
      color: var(--wms-text-color-primary);
    }
  }
  
  /* 对话框内容定制 */
  .el-dialog__body {
    padding: var(--wms-padding-lg);
  }
  
  /* 对话框底部定制 */
  .el-dialog__footer {
    border-top: 1px solid var(--wms-border-color-light);
    padding: var(--wms-padding-lg);
    text-align: right;
  }
}

/* ================================
 * 抽屉组件定制
 * ================================ */

.el-drawer {
  /* 抽屉头部定制 */
  .el-drawer__header {
    border-bottom: 1px solid var(--wms-border-color-light);
    padding: var(--wms-padding-lg);
    
    .el-drawer__title {
      font-weight: var(--wms-font-weight-medium);
      color: var(--wms-text-color-primary);
    }
  }
  
  /* 抽屉内容定制 */
  .el-drawer__body {
    padding: var(--wms-padding-lg);
  }
}

/* ================================
 * 下拉选择器定制
 * ================================ */

.el-select {
  /* 选择器样式定制 */
  .el-select__wrapper {
    border-radius: var(--wms-border-radius-base);
    transition: var(--wms-transition-base);
    
    &:hover {
      border-color: var(--wms-primary-color);
    }
    
    &.is-focused {
      border-color: var(--wms-primary-color);
      box-shadow: 0 0 0 2px var(--wms-primary-color-light);
    }
  }
  
  /* 选择器图标定制 */
  .el-select__caret {
    color: var(--wms-text-color-secondary);
  }
  
  /* 多选标签定制 */
  .el-select__tags {
    .el-tag {
      background-color: var(--wms-primary-color-light);
      border-color: var(--wms-primary-color);
      color: var(--wms-primary-color-dark);
    }
  }
}

/* 下拉面板定制 */
.el-select-dropdown {
  border-radius: var(--wms-border-radius-md);
  box-shadow: var(--wms-dropdown-shadow);
  
  .el-select-dropdown__item {
    transition: var(--wms-transition-fast);
    
    &:hover {
      background-color: var(--wms-primary-color-light);
    }
    
    &.is-selected {
      background-color: var(--wms-primary-color);
      color: var(--wms-text-color-white);
    }
  }
}

/* ================================
 * 日期选择器定制
 * ================================ */

.el-date-editor {
  .el-input__wrapper {
    border-radius: var(--wms-border-radius-base);
    
    &:hover {
      border-color: var(--wms-primary-color);
    }
    
    &.is-focus {
      border-color: var(--wms-primary-color);
      box-shadow: 0 0 0 2px var(--wms-primary-color-light);
    }
  }
}

/* 日期面板定制 */
.el-date-picker {
  border-radius: var(--wms-border-radius-md);
  box-shadow: var(--wms-dropdown-shadow);
  
  .el-date-picker__header {
    border-bottom-color: var(--wms-border-color-light);
  }
}

/* ================================
 * 消息提示定制
 * ================================ */

.el-message {
  border-radius: var(--wms-border-radius-md);
  box-shadow: var(--wms-shadow-lg);
  
  &.el-message--success {
    background-color: var(--wms-success-color-light);
    border-color: var(--wms-success-color);
    color: var(--wms-success-color-dark);
  }
  
  &.el-message--warning {
    background-color: var(--wms-warning-color-light);
    border-color: var(--wms-warning-color);
    color: var(--wms-warning-color-dark);
  }
  
  &.el-message--error {
    background-color: var(--wms-error-color-light);
    border-color: var(--wms-error-color);
    color: var(--wms-error-color-dark);
  }
  
  &.el-message--info {
    background-color: var(--wms-info-color-light);
    border-color: var(--wms-info-color);
    color: var(--wms-info-color-dark);
  }
}

/* ================================
 * 通知定制
 * ================================ */

.el-notification {
  border-radius: var(--wms-border-radius-lg);
  box-shadow: var(--wms-shadow-xl);
  
  .el-notification__title {
    color: var(--wms-text-color-primary);
    font-weight: var(--wms-font-weight-medium);
  }
  
  .el-notification__content {
    color: var(--wms-text-color-regular);
  }
}

/* ================================
 * 标签页定制
 * ================================ */

.el-tabs {
  /* 标签栏定制 */
  .el-tabs__header {
    margin-bottom: var(--wms-margin-lg);
    
    .el-tabs__nav-wrap {
      &::after {
        background-color: var(--wms-border-color-light);
      }
    }
  }
  
  /* 标签项定制 */
  .el-tabs__item {
    color: var(--wms-text-color-secondary);
    transition: var(--wms-transition-base);
    
    &:hover {
      color: var(--wms-primary-color);
    }
    
    &.is-active {
      color: var(--wms-primary-color);
    }
  }
  
  /* 活动指示器定制 */
  .el-tabs__active-bar {
    background-color: var(--wms-primary-color);
  }
}

/* ================================
 * 标签定制
 * ================================ */

.el-tag {
  border-radius: var(--wms-border-radius-sm);
  font-weight: var(--wms-font-weight-medium);
  
  &.el-tag--primary {
    background-color: var(--wms-primary-color-light);
    border-color: var(--wms-primary-color);
    color: var(--wms-primary-color-dark);
  }
  
  &.el-tag--success {
    background-color: var(--wms-success-color-light);
    border-color: var(--wms-success-color);
    color: var(--wms-success-color-dark);
  }
  
  &.el-tag--warning {
    background-color: var(--wms-warning-color-light);
    border-color: var(--wms-warning-color);
    color: var(--wms-warning-color-dark);
  }
  
  &.el-tag--danger {
    background-color: var(--wms-error-color-light);
    border-color: var(--wms-error-color);
    color: var(--wms-error-color-dark);
  }
  
  &.el-tag--info {
    background-color: var(--wms-info-color-light);
    border-color: var(--wms-info-color);
    color: var(--wms-info-color-dark);
  }
}

/* ================================
 * 加载中定制
 * ================================ */

.el-loading-mask {
  background-color: var(--wms-bg-mask);
  
  .el-loading-spinner {
    .el-loading-text {
      color: var(--wms-text-color-white);
    }
  }
}

/* ================================
 * 暗色主题适配
 * ================================ */

[data-theme="dark"] {
  /* Element Plus暗色主题变量 */
  --el-bg-color: var(--wms-bg-white);
  --el-bg-color-page: var(--wms-bg-light);
  --el-text-color-primary: var(--wms-text-color-primary);
  --el-text-color-regular: var(--wms-text-color-regular);
  --el-border-color: var(--wms-border-color);
  
  /* 组件特殊处理 */
  .el-table {
    .el-table__header-wrapper {
      th {
        background-color: var(--wms-bg-secondary);
      }
    }
  }
  
  .el-dialog,
  .el-drawer {
    background-color: var(--wms-bg-white);
  }
}